<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>权限管理</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css"
          rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
    <!--select2-->
    <link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
    <link href="/app/css/common.css" rel="stylesheet"/>
    <link href="/app/css/skins.css" rel="stylesheet"/>
    <style>
        .dd {

            max-width: 100%;
        }

        .dd-handle {
            display: inline-block;
            margin: 0px;
            border: 0px solid #ccc;
            background: rgba(0, 0, 0, 0);
        }

        .dd-handle:hover {
            background: rgba(0, 0, 0, 0);
            cursor: pointer;
        }

        .dd3-h {
            color: inherit;
            border: 1px dashed #e7eaec;
            background: #f0f3f4;
            padding: 5px;
            padding-top: 10px;
            display: block;
            margin: 5px 0;
            color: #333;
            text-decoration: none;
            border: 1px solid #e7eaec;
            background: #f5f5f5;
            border-radius: 3px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .col {
            padding-left: 30px;

        }

        .i-btn {
            margin-top: -3px;
            padding: 3px 10px;
        }

        .dd-item > button {

            margin-top: 15px;
        }

        .ml10 {
            color: #000;
            margin: 0 5px;
        }

        .btn-group {
            width: 100%;
            height: 50px;
        }

        .radio-group {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="btn-group">
        <a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i>
            新增权限</a>
        <span class="pull-right">
            <a class="waves-effect waves-button" href="javascript:;" onclick="collapseAll()"><i class="zmdi zmdi-chevron-up"></i>
            折叠</a>
            <a class="waves-effect waves-button" href="javascript:;" onclick="expandAll()"><i class="zmdi zmdi-chevron-down"></i>
            展开</a>
        </span>

    </div>
    <div class="dd" id="nestable">
        <ol id="dd-empty-ol" class='dd-list dd3-list'>
        </ol>
    </div>
</div>

<script src="/plugins/jquery.1.12.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.min.js"></script>
<script src="/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/plugins/jquery-confirm/jquery-confirm.min.js"></script>

<!--给form使用-->
<!-- select2 -->
<script src="https://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>

<script src="/app/js/common.js"></script>
<script src="/app/js/i-ajax.js"></script>
<script>
    jconfirm.defaults = {
        theme: 'material',
    };
    function getMenuTree(fc) {
        iGet('/api/menu', function (data) {
            fc(data.content);
        })
    }
    function updateMenu(data) {
        iPut('/api/menu/' + data.id, data, null, function (data) {
            console.log("update Menu success!");
        });
    }
    function deleteMenu(ids,cb,ecb) {
        iDelete('/api/menu', ids, null, cb, ecb);
    }
    var $nestable = $('#nestable');
    Waves.displayEffect();

    function collapseAll() {
        $nestable.nestable('collapseAll');
    }

    function expandAll() {
        $nestable.nestable('expandAll');
    }
    //    https://github.com/RamonSmit/Nestable2
    var obj = '[{"id":1,"name":"name","depth":1,"icon":"zmdi zmdi-book","href":"href","permission":"permission"},{"id":2,"name":"name","depth":1,"icon":"zmdi zmdi-plus","href":"href","permission":"permission"},{"id":3,"name":"name","depth":1,"icon":"zmdi zmdi-plus","href":"href","permission":"permission","children":[{"id":4,"name":"name","depth":2,"icon":"zmdi zmdi-plus","href":"href","permission":"permission"},{"id":5,"name":"name","depth":2,"icon":"zmdi zmdi-plus","href":"href","permission":"permission"}]}]';
    var output = '';
    function buildItem(item) {
        var depthName = item.depth == 1 ? '系统' : item.depth == 2 ? '目录' : '菜单';
        var depthLable = item.depth == 1 ? 'label-primary' : item.depth == 2 ? 'label-success' : 'label-info';
        var html = "<li class='dd-item ' data-id='" + item.id + "'>";
        var span = "";
        if (item.depth == 1) {
            span = "<span class='dd-handle dd3-handle'><span class=' " + item.icon + "'>&nbsp;&nbsp;&nbsp;" + item.name + "</span>&nbsp;&nbsp;<span class='label " + item.skin + "'>" + depthName + "</span></span>";
        } else {
            span = "<span class='dd-handle dd3-handle'><span class=' " + item.icon + "'>&nbsp;&nbsp;&nbsp;" + item.name + "</span>&nbsp;&nbsp;<span class='label " + depthLable + "'>" + depthName + "</span></span>";
        }
        if (item.depth == 3) span += "<span class='col col-text'> 地址链接 :" + item.url + " permission " + item.permission + "</span>";
        span += "<span class='pull-right col'>"
        span += '<a class="edit ml10" href="javascript:updateAction(' + item.id + ')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>'
        span += '<a class="remove ml10" href="javascript:deleteAction(' + item.id + ')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        span += "</span>"
        html += "<div class='dd3-h'>" + span + "</div>";

        if (item.children) {
            html += "<ol class='dd-list' data-pid =" + item.id + ">";
            $.each(item.children, function (index, sub) {
                html += buildItem(sub);
            });
            html += "</ol>";

        }
        html += "</li>";

        return html;
    }

    getMenuTree(function (data) {
        $.each(data, function (index, item) {
            output += buildItem(item);
        });
    })

    $('#dd-empty-ol').append(output);
    $nestable.nestable({
        callback: function () {
            function buildMenu(obj) {
                return {
                    id: obj.id,
                    depth: obj.depth,
                    sort: obj.left,
                    parent: {
                        id: obj.parent_id ? obj.parent_id : 1
                    }
                }
            }
            $nestable.nestable('toArray').forEach(function (obj) {
                updateMenu(buildMenu(obj));
            });
        }, maxDepth: 3
    });
    //折叠
    $nestable.nestable('collapseAll');
    //node: {"id":1,"name":"name","icon":"zmdi zmdi-book","href":"href","permission":"permission"}
    function updateNestableNode(node) {
        var depthName = node.depth == 1 ? '系统' : node.depth == 2 ? '目录' : '菜单';
        var depthLable = node.depth == 1 ? node.skin : node.depth == 2 ? 'label-success' : 'label-info';
        var span = "<span class=' " + node.icon + "'>&nbsp;&nbsp;&nbsp;" + node.name + "</span>&nbsp;&nbsp;<span class='label " + depthLable + "'>" + depthName + "</span>";
        $('li[data-id=' + node.id + ']>div>.dd-handle').html(span);
        if (node.depth == 1) $('li[data-id=' + node.id + '] .col-skin').text('skin :' + node.skin);
        if (node.depth == 3) $('li[data-id=' + node.id + '] .col-text').text('地址链接 :' + node.url + ' permission ' + node.permission);
    }
    function addNestableNode(pid, node) {
        console.log(pid);
        if (pid) {
            //添加子节点
            var $children_ol = $('ol[data-pid=' + pid + ']');
            if ($children_ol.length == 0) {
                $('li[data-id=' + pid + ']').prepend('<button class="dd-expand" data-action="expand" type="button">Expand</button><button class="dd-collapse" data-action="collapse" type="button">Collapse</button>');
                $('li[data-id=' + pid + ']').append('<ol class="dd-list" data-pid="' + pid + '"></ol>');
                $children_ol = $('ol[data-pid=' + pid + ']');
//                console.log('添加子节点');
            }
            $children_ol.append(buildItem(node));
        } else {
            //添加根节点
            $('#dd-empty-ol').append(buildItem(node));
        }
    }

    var createOrUpdateDialog;

    var updateId = 0;


    function createAction() {
        updateId = 0;
        createOrUpdateDialog = $.dialog({
            animationSpeed: 300,
            title: '新增权限',
            content: 'url:/page/sys/menu/form.html',
            onContentReady: function () {
                initMaterialInput();
            }
        });
    }
    function updateAction(id) {
//        console.log(id);
        updateId = id;
        createOrUpdateDialog = $.dialog({
            animationSpeed: 300,
            title: '編輯权限',
            content: 'url:/page/sys/menu/form.html',
            onContentReady: function () {
                initMaterialInput();
            }
        });
    }
    function deleteAction(id) {
        $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        console.log(id);
                        var ids = [id];
                        deleteMenu(ids, function (data) {
                            if(data.status == 'SUCCESS'){
                                $('.dd').nestable('remove', id);
                            }else{
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: data.msg,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }

                        }, function (data) {
                            console.log(data)
                        })
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }
</script>
</body>
</html>